<template>
  <div>
    <div class="card-wra">
      <div class="title flex-ac between">
        <div class="l flex-ac">
          {{ record.createTime }}
        </div>
        <div class="r">
          {{ withdrawStatusType }}
        </div>
      </div>
      <div class="content flex-ac between">
        <div class="l flex-ac">
          <div class="img">
            <Image :src="AliPayIcon" alt="" />
          </div>
          <div class="number">
            <div class="phone">
              {{ record.bankAccount }}
            </div>
            <div class="name">
              {{ record.userName }}
            </div>
          </div>
        </div>
        <div class="r">
          <div class="">
            提现金额：￥{{ record.withdrawalAmount }}
          </div>
          <div class="">
            实际金额：￥{{ record.actualAmount }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="line" v-if="index + 1 !== length" />
</template>
<script setup lang="ts">
import { Image } from 'vant';
import { computed, type PropType } from 'vue';

import AliPayIcon from '@/assets/images/alipay-icon.png';

import WithdrawItem from '../models/WithdrawItem';

const props = defineProps({
  record: {
    type: Object as PropType<WithdrawItem>,
    default: () => ({}),
  },
  index: {
    type: Number,
    default: 0,
  },
  length: {
    type: Number,
    default: 0,
  },
});

const withdrawStatusType = computed(() => {
  const WithdrawStatusType: Record<any, any> = {
    1: '成功',
    2: '处理中',
  };

  return props.record.status === null ? '成功' : (WithdrawStatusType[props.record.status] || '处理中');
});

</script>
<style scoped lang="less">
.line {
  height: 10px;
  background-color: #f6f6f6;
}

.flex {
  display: flex;
}

.flex-ac {
  display: flex;
  align-items: center;
}

.between {
  justify-content: space-between;
}

.card-wra {
  border-top: 1px solid rgb(231, 226, 226);
  border-bottom: 1px solid rgb(231, 226, 226);
}

.title {
  padding: 6px 12px;
  border-bottom: 1px solid rgb(231, 226, 226);

  .l {
    color: #565454;
    font-size: 12px;
  }

  .r {
    color: #565454;
    font-size: 12px;
  }
}

.content {
  padding: 6px 12px;

  .l {
    .img {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      margin-right: 10px;

      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
    }

    .number {
      .phone {
        color: #565454;
        font-size: 15px;
      }

      .name {
        margin-top: 5px;
        color: #a19d9d;
        font-size: 12px;
      }
    }
  }

  .r {
    color: #444141;
    font-size: 14px;
  }
}

.time {
  padding: 0px 20px;

  .l {
    color: #706e6e;
    font-size: 12px;
  }

  .r {
    .num {
      color: #706e6e;
      font-size: 12px;
    }

    .price {
      color: red;
      font-size: 16px;
    }
  }
}
</style>
